<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css?v=2020031412" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="./js/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<title></title>
		<style>
			body {
			/* background-color: #203CF4; */
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.sui-list-item:last-child{
			background-image: none;
		}	
		
	</style>

	</head>

	<body>
		<svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
			<symbol id="icon-beng-1" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/beng_1.png" />
			</symbol>
			<symbol id="icon-beng-2" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/beng_2.png" />
			</symbol>
			<symbol id="icon-beng-3" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/beng_3.png" />
			</symbol>
			<symbol id="icon-dianci" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/dianci.png" />
			</symbol>
			<symbol id="icon-p-2-dr" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_dr.png" />
			</symbol>
			<symbol id="icon-p-2-ld" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_ld.png" />
			</symbol>
			<symbol id="icon-p-2-lu" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_lu.png" />
			</symbol>
			<symbol id="icon-p-2-ur" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_ur.png" />
			</symbol>
			<symbol id="icon-p-3-d" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_3_d.png" />
			</symbol>
			<symbol id="icon-p-3-l" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_3_l.png" />
			</symbol>
			<symbol id="icon-p-3-r" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_3_r.png" />
			</symbol>
			<symbol id="icon-p-4" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_4.png" />
			</symbol>
			<symbol id="icon-water-ball" viewBox="0 0 200 200">
				<image width="200" height="200" x="0" y="0" href="img/water_ball.png" />
			</symbol>
			<symbol id="icon-press" viewBox="0 0 200 200">
				<image width="200" height="200" x="0" y="0" href="img/press.png" />
			</symbol>

		</svg>



		<header class="sui-bar sui-bar-nav top-box" style="height: 85px;box-shadow: 0px 2px 1px rgba(0,0,0,0.5)">
			<!-- 	<div class="sui-pull-left">
				<img src="img/logo_white.png" style="height: 1.7rem;margin-left: 0.5rem;margin-top: 0.275rem;" />
			</div> -->
			<div class="sui-title" style="height: 85px; line-height: 85px;">智慧水务系统</div>

			<div class="sui-pull-right">
				<img src="img/menu.png" id="icon-menu" />
			</div>
		</header>

		<div class="sui-wrap back-box " id="datas" style="height: 100vh;width: 100vw;">
			<div class="sui-flex-col ">
				<div class="sui-content  sui-flex-col sui-flex-1" style="padding-left: 2%;" onclick="openControl()">
					<svg id="svg_box" height="900" width="1200" viewBox="0,0,1200,900">

						<!-- 主路径 -->
						<!-- <path class="" d="M 0,400 L 200,400 L 200,600 L 600,600 L 600,200 L 1000,200 L 1000,300 L 1000,300 L 1200,300"
					 style="fill:none;stroke:white;stroke-width:10" /> -->

						<path class="" d="M20,330 L 150,330 L 150,610 L270,610 M 400,610   L 500,610  L500,500 L600,500 L 600,250 L 1150,250 "
						 style="fill:none;stroke:white;stroke-width:10" />

						<!-- 水箱阴影 -->
						<!-- <defs>
						<filter id="f1" x="0" y="0" width="200%" height="200%">
							<feOffset result="offOut" in="SourceAlpha" dx="10" dy="10" />
							<feGaussianBlur result="blurOut" in="offOut" stdDeviation="4" />
							<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
						</filter>
					</defs> -->
						<use xlink:href="#icon-water-ball" x=120 y=150 width="400" height="400"></use>
						<use xlink:href="#icon-water-ball" x=120 y=430 width="400" height="400"></use>

						<!-- 水箱 -->
						<!-- 	<rect id="key" width="200" height="150" rx="10" ry="10" x=300 y=350 filter="url(#f1)" style="fill:#3B78F3;stroke-width:2;stroke:#E3E3E3" />
					
					<svg x="305" y="395" width="190" height="200">
						<g fill="rgba(45, 58, 173, 25)">
							<path d="M 0,40 Q 48,0 95,40 T 190 40 T 285,40 T 375,40 T 470,40 T 565,40 T 660,40 V 100 H 0 V 0"></path>
							 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-380" dur="2s"
							 repeatCount="indefinite"></animateTransform>
						</g>

					</svg> -->


						<!-- <svg x="305" y="395" width="190" height="150">
						<g fill="rgba(45, 58, 173, 25)">
							<path d="M 0 20 Q 75 35, 150 20 T 300 20 T 450 20 T 600 20 T 750 20 V 100 H 0 V 0"></path>
							<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="1.5s"
							 repeatCount="indefinite"></animateTransform>
						</g>
					
					</svg> -->

						<!-- 其他白色路径 -->
						<path class="" d="M 150,330 L 230,330 " style="fill:none;stroke:white;stroke-width:10" />
						<path class="" d="M 420,330 L 500,330 L500,500 " style="fill:none;stroke:white;stroke-width:10" />
						<!-- 2 -->
						<!-- <path class="" d="M 600,400 L 1000,400 " style="fill:none;stroke:white;stroke-width:10" /> -->
						<!-- 3 -->
						<path class="" d="M 600,500 L 1150,500 " style="fill:none;stroke:white;stroke-width:10" />
						<!-- 最底部 -->
						<path class="" d="M 600,500 L 600,770 L 1150,770 " style="fill:none;stroke:white;stroke-width:10" />

						<!-- 文字 -->
						<!-- <text class="svg_text" x=510 y=500 font-size="16" font-family="YouYuan" x="100" y="100" width="200" height="30">压力变送器</text> -->
						<text id="rsll" class="svg_text" x=0 y=230 font-size="20" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">入水流量:</text>
						<text id="yl" class="svg_text" x=0 y=270 font-size="20" font-family="YouYuan" x="100" y="100" width="200" height="30">压力:</text>


						<text class="svg_text" x=280 y=470 font-size="25" font-family="YouYuan" x="100" y="100" width="200" height="30">1#清水池</text>
						<text class="svg_text" x=280 y=740 font-size="25" font-family="YouYuan" x="100" y="100" width="200" height="30">2#清水池</text>
						<!-- <text class="svg_text" x=65 y=320 font-size="16" font-family="YouYuan" x="100" y="100" width="200" height="30">电磁阀</text> -->

						<text id="yw1" class="svg_text" x=300 y=360 font-size="35" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">液位1</text>
						<text id="yw2" class="svg_text" x=300 y=630 font-size="35" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">液位2</text>


						<text class="svg_text" x=740 y=320 font-size="25" font-family="YouYuan" x="100" y="100" width="200" height="30">高压区</text>
						<text class="svg_text" x=740 y=560 font-size="25" font-family="YouYuan" x="100" y="100" width="200" height="30">中压区</text>
						<text class="svg_text" x=740 y=830 font-size="25" font-family="YouYuan" x="100" y="100" width="200" height="30">低压区</text>

						<text id="zll1" class="svg_text" x=900 y=160 font-size="20" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">总流量:</text>
						<text id="zll2" class="svg_text" x=900 y=400 font-size="20" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">总流量:</text>
						<text id="zll3" class="svg_text" x=900 y=660 font-size="20" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">总流量:</text>

						<text id="csyl1" class="svg_text" x=900 y=190 font-size="20" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">出水压力:</text>
						<text id="csyl2" class="svg_text" x=900 y=430 font-size="20" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">出水压力:</text>
						<text id="csyl3" class="svg_text" x=900 y=690 font-size="20" font-family="YouYuan" x="100" y="100" width="200"
						 height="30">出水压力:</text>


						<!-- <text class="svg_text" x=840 y=150 font-size="14" font-family="YouYuan" x="100" y="100" width="200" height="30">运行时间:
						0 h</text>
					<text class="svg_text" x=840 y=180 font-size="14" font-family="YouYuan" x="100" y="100" width="200" height="30">运行频率:
						0.0hz</text>

					<text class="svg_text" x=840 y=420 font-size="14" font-family="YouYuan" x="100" y="100" width="200" height="30">运行时间:
						2292h</text>
					<text class="svg_text" x=840 y=450 font-size="14" font-family="YouYuan" x="100" y="100" width="200" height="30">运行频率:
						34.0hz</text>

					<text class="svg_text" x=840 y=650 font-size="14" font-family="YouYuan" x="100" y="100" width="200" height="30">运行时间:
						0 h</text>
					<text class="svg_text" x=840 y=680 font-size="14" font-family="YouYuan" x="100" y="100" width="200" height="30">运行频率:
						34.0hz</text>
 -->

						<!-- <use class="icon" xlink:href="#icon_diancifa" width="50" height="50" x=100 y=400 ></use> -->
						<!-- <svg class="icon" aria-hidden="true"> -->

						<!-- </svg> -->
						<!-- <path class="no-water" id="water1" d="M 0,400 L 295,400 M 505,470 L 600,470 L 600,200 L 1000,200 L 1000,300 L 1000,300 L 1200,300"
					 style="fill:none;stroke:#0C3AD9;stroke-width:8" />	 -->

						<path class="no-water" id="water11" d="M 0,400 L 200,400 L 200,600 L 600,600 L 600,470 L 600,200 L 1000,200 L 1000,300 L 1000,300 L 1200,300"
						 style="fill:none;stroke:#0C3AD9;stroke-width:8" />
						<path class="no-water" id="water22" d="M 0,400 L 305,400 M 485,470 L 600,470 L 600,600 L 1000,600 L 1000,300 L 1000,300 L 1200,300"
						 style="fill:none;stroke:#0C3AD9;stroke-width:8" />



						<!-- <use style="fill: #0062CC;" xlink:href="#icon-dianci" x=50 y=335 width="80" height="80"></use> -->

						<!-- <use style="fill: #0062CC;" xlink:href="#icon-beng-1" x=750 y=335 width="80" height="80"></use> -->
						<use style="fill: #0062CC;" xlink:href="#icon-beng-1" x=700 y=130 width="150" height="150"></use>
						<use style="fill: #0062CC;" xlink:href="#icon-beng-1" x=700 y=380 width="150" height="150"></use>
						<use style="fill: #0062CC;" xlink:href="#icon-beng-1" x=700 y=650 width="150" height="150"></use>

						<!-- <use style="fill: #0062CC;" xlink:href="#icon-tt" x=150 y=135 width="80" height="80"></use>a -->

						<use style="fill: #0062CC;" xlink:href="#icon-dianci" x=900 y=202 width="60" height="60"></use>
						<use style="fill: #0062CC;" xlink:href="#icon-dianci" x=900 y=452 width="60" height="60"></use>
						<use style="fill: #0062CC;" xlink:href="#icon-dianci" x=900 y=722 width="60" height="60"></use>


						<use style="fill: #0062CC;" xlink:href="#icon-press" x=1050 y=202 width="60" height="60"></use>
						<use style="fill: #0062CC;" xlink:href="#icon-press" x=1050 y=452 width="60" height="60"></use>
						<use style="fill: #0062CC;" xlink:href="#icon-press" x=1050 y=722 width="60" height="60"></use>


						<use xlink:href="#icon-p-3-d" x=110 y=300 width="80" height="80"></use>
						<use xlink:href="#icon-p-2-ur" x=115 y=560 width="80" height="80"></use>

						<use xlink:href="#icon-p-2-ld" x=450 y=295 width="80" height="80"></use>
						<use xlink:href="#icon-p-3-r" x=470 y=460 width="80" height="80"></use>
						<use xlink:href="#icon-p-2-lu" x=451 y=560 width="80" height="80"></use>

						<use xlink:href="#icon-p-2-dr" x=570 y=215 width="80" height="80"></use>
						<use xlink:href="#icon-p-4" x=560 y=460 width="80" height="80"></use>
						<use xlink:href="#icon-p-2-ur" x=566 y=720 width="80" height="80"></use>

						<!-- <use xlink:href="#icon-p-2-ld" x=951 y=215 width="80" height="80"></use> -->
						<!-- <use xlink:href="#icon-p-3-r" x=970 y=360 width="80" height="80"></use> -->

						<!-- <use xlink:href="#icon-p-3-l" x=952 y=360 width="80" height="80"></use> -->
						<!-- <use xlink:href="#icon-p-3-l" x=952 y=460 width="80" height="80"></use> -->

						<!-- <use xlink:href="#icon-p-2-lu" x=951 y=720 width="80" height="80"></use> -->

					</svg>


				</div>

				<div class="sui-content animated fadeInRight sui-flex-col sui-flex-between" id="pannel2">
					<section class="sui-content background-box-2">
						<div class=" box-info">
							<p class="box-info-title" style="height: 1.0rem;line-height: 1.0rem;">高压区详细信息</p>
							<div class="sui-row sui-row-padded">
								<p class="sui-col-xs-12">一号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("1#泵站","1#泵电压_1")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("1#泵站","1#泵电流_1")}}</p>
								<p class="sui-col-xs-12">二号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("1#泵站","2#泵电压_1")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("1#泵站","2#泵电流_1")}}</p>
								<p class="sui-col-xs-12">三号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("1#泵站","3#泵电压_1")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("1#泵站","3#泵电流_1")}}</p>
							</div>
						</div>
					</section>

					<div class="sui-content background-box-2" style="margin-top: 0.5rem;margin-right: 0rem;">
						<div class=" box-info ">
							<p class="box-info-title" style="height: 1.0rem;line-height: 1.0rem;">中压区详细信息</p>
							<div class="sui-row sui-row-padded">
								<p class="sui-col-xs-12">一号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("2#泵站","1#泵电压_2")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("2#泵站","1#泵电流_2")}}</p>
								<p class="sui-col-xs-12">二号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("2#泵站","2#泵电压_2")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("2#泵站","2#泵电流_2")}}</p>
								<p class="sui-col-xs-12">三号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("2#泵站","3#泵电压_2")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("2#泵站","3#泵电流_2")}}</p>
							</div>
						</div>
					</div>

					<section class="sui-content background-box-1" style="margin-top: 0.5rem;width: 100%;">
						<div class="box-info ">
							<p class="box-info-title" style="height: 1.0rem;line-height: 1.0rem;">低压区详细信息</p>
							<div class="sui-row sui-row-padded">
								<p class="sui-col-xs-12">一号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("3#泵站","1#泵电压_3")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("3#泵站","1#泵电流_3")}}</p>
								<p class="sui-col-xs-12">二号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("3#泵站","2#泵电压_3")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("3#泵站","2#泵电流_3")}}</p>
								<p class="sui-col-xs-12">三号泵 </p>
								<p class="sui-col-xs-6">电压： {{ getBen("3#泵站","3#泵电压_3")}} </p>
								<p class="sui-col-xs-6">电流： {{ getBen("3#泵站","3#泵电流_3")}}</p>
							</div>
						</div>
					</section>
				</div>

				<div id="pannel4" class="sui-content animated fadeInLeft ">
					<div class=" sui-padded-10 box-info background-box-3" style="height: 5rem;margin-top: 5rem;">
						<p class="box-info-title2">安全信息</p>
						<div class="sui-row sui-row-padded">
							<p class="sui-col-xs-6">门禁: {{ getBen("泵房监控","泵房门禁状态")==0?"关":"开"}}</p>
							<p class="sui-col-xs-6">入侵: {{ getBen("泵房监控","泵房入侵状态")==0?"无":"有"}}</p>
							<p class="sui-col-xs-6">摄像: 有</p>
							<p class="sui-col-xs-6">烟感: {{ getBen("泵房监控","泵房烟感")==0?"无":"有"}}</p>
						</div>
					</div>
					<div class="sui-padded-10 box-info background-box-3" style="height: 5rem;">
						<p class="box-info-title2">环境信息</p>
						<div class="sui-row sui-row-padded">
							<p class="sui-col-xs-6">排风: {{ getBen("泵房监控","泵房排污状态")==0?"关闭":"运行"}}</p>
							<p class="sui-col-xs-6">排污: {{ getBen("泵房监控","泵房排污状态")==0?"关闭":"运行"}}</p>
							<p class="sui-col-xs-6">温度: {{ getBen("泵房监控","泵房温度")}}</p>
							<p class="sui-col-xs-6">湿度: {{ getBen("泵房监控","泵房湿度")}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="application/javascript" src="lib/sui.js"></script>
		<!-- <script type="application/javascript" src="lib/sui-accordion.js"></script> -->
		<script type="application/javascript" src="lib/vue.min.js"></script>
		<script type="application/javascript" src="js/common.js"></script>
			<script type="application/javascript" src="./js/api.js"></script>
		<script type="application/javascript" src="lib/sui-popup.js"></script>
		<script type="application/javascript" src="js/menu.js?v=202003051"></script>
		<script type="application/javascript" src="main.js"></script>
	

		<script type="text/javascript">

		</script>

	</body>

</html>
